<template>
  <h1>上传图片</h1>
  <el-upload
      class="upload-demo"
      drag
      multiple
      :action=action
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :headers="headers"
  >
    <el-icon class="el-icon--upload">
      <upload-filled/>
    </el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup>
import file from "@/uitlsJs/Axios/path.js";
import {userDefineStore} from "@/uitlsJs/Pinia/stores/user.js";
import {ref} from "vue";
import {UploadFilled} from "@element-plus/icons-vue";

const action = file.baseUrl + file.file;
// 处理头像成功
const handleAvatarSuccess = (response, file, fileList) => {
  console.log(response)
  console.log(file)
  console.log(fileList)
}
const headers = ref({
  token: ''
})

// 处理头像上传前
const beforeAvatarUpload = (response, file, fileList) => {
  let counterStore = userDefineStore();
  let token = counterStore.userInfo.token;
  if (token) {
    console.log(token)
    headers.value.token = token;
    return true  // 允许上传
  }
  return false  // 不允许上传
}

</script>
